<template>
  <div class="page" data-page="VRview" style="z-index: 2;">
    <div class="navbar">
      <div class="navbar-inner">
        <div class="left" @click=$root.backToTab(4)>
            <a class="link">
              <i class="icon icon-back"></i>
              <span class="ios-only">Back</span>
            </a>
        </div>
        <div class="title sliding" style="left: -29px;">VR全景</div>
      </div>
    </div>
    <div data-infinite-distance="50" class="page-content layer2D-content infinite-scroll-content" @infinite="loadMore">
        <div class="row layer2D-top">
          <div class="link col item-title" id="unit_piker">
            <span>联网单位</span>
            <i class="select-down"></i>
          </div>
          <div class="link col item-title"  id="build_select">
              <span>建筑物</span>
              <i class="select-down"></i>
          </div>
        </div>
        <div class="block block-strong" id="VR_list">

        </div>
        <div class="preloader infinite-scroll-preloader" id="VR_preloader"></div>
    </div>
  </div>
</template>
<style scoped>

  .layer2D-top{
    padding-top: 5px;
  }
  .layer2D-top .col{
    margin: 10px auto;
    font-size: 14px;
    text-align: center;
  }
  .layer2D-top .col i{
    font-size: 14px;
  }
  .layer2D-content .block-strong{
    margin-top: 0px;
  }
  #VR_list a{
    display: inline-block;
    width: 100%;
    font-size: 14px;
    color: #666666;
  }
  .build-sheet-modal .list{
    margin: 0px;
  }
  .item-title span{
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
  }
  .every-layer-list{
    width: 100%;
    position: relative;
    height: 0;
    padding-bottom: 56.25%;
  }
  .every-layer-list-pic{
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
  }
  .layer2D-content .block-strong:after{
    height: 0px !important;
  }
</style>
<script>
  return{
      data: function () {
        return {
            currentOrgId:userInfor.organizationIds,
            currentBuildId:0,
            pageIndex:0,
            pageSize:25,
            vrType:0,//显示范围类型(0:显示联网单位及建筑物vr、1:只显示联网单位vr、2:只显示建筑物vr)
            isNoLoadMore:true,
            width:screen.width - 32,
        }
      },
      methods: {
          loadMore:function(){
            if (this.isNoLoadMore) {
                this.pageIndex++;
                this.getLayeredGraphListData();
            }
          },
          //获取分层图数据
          getLayeredGraphListData:function(){
            var self = this;
            var $ = self.$;
            Dao.getVrList({
                userName:userInfor.accountName,
                deviceId:appKeyObj.deviceId,
                orgIds:self.currentOrgId,
                fbsId:self.currentBuildId,
                type:self.vrType,
                pageIndex:self.pageIndex,
                pageSize:self.pageSize,
            },function(data){
                if(data && data.length > 0){
                    if (data.length < self.pageSize){
                        self.isNoLoadMore = false;
                        $("#VR_preloader").hide();
                    } else {
                        self.isNoLoadMore = true;
                        $("#VR_preloader").show();
                    }
                  for(var i=0;i<data.length;i++){
                      var image = staticPath+"img/mine/noVR.png";
                      if (data[i].viewUrl&&data[i].viewUrl!=""){

                          image = data[i].viewUrl+'?imageView2/0/w/'+self.width+'/';
                      }
                      $("#VR_list").append(`
                        <a href=/unitVRview/`+encodeURIComponent(data[i].vrUrl)+`/ class="link-item">
                          <div>
                            <div class="every-layer-list">
                              <img src="`+image+`" class="every-layer-list-pic" alt="">
                            </div>
                            <p>`+common.transNullundefined(data[i].orgName)+' '+ common.transNullundefined(data[i].fbsName) +`</p>
                          </div>
                      </a>`);
                  }
                } else {
                    $("#VR_list").append(`<div class="no-data-img"><img src="`+listNoDataPic()+`"/></div>`);
                }
            },function(e) {
                common.loading(0);
                $("#VR_preloader").hide();
                app.methods.showToastBottom("获取VR全景列表失败");
            });
          },

      },
      on: {
        pageInit: function(e, page) {
          var self = this;
          var app = self.$app;
           //判断单/多
          if(userInfor.isMuilUnitUser == 0){
                //单联网单位
                $("#unit_piker").hide();
                self.currentOrgId = userInfor.organizationIds;
          }else{
            if (currentUserUnitListData.length!=0){
                if (self.currentOrgId == 0) {
                    $("#unit_piker span").html(currentUserUnitListData[0].shortName);
                    self.currentOrgId = currentUserUnitListData[0].organizationId;
                }
            }
            //多联网单位
            $("#unit_piker").show().click(function(event) {
              loadSelectUnitFunc(function(data){
                //{"orgId":orgId,"orgName":orgName}
                self.currentOrgId = data.orgId;
                self.currentBuildId = 0;
                $("#build_select span").html('建筑物');
                $("#unit_piker span").html(data.orgName);
                self.pageIndex = 0;
                self.vrType = 0;
                $("#VR_list").empty();
                self.getLayeredGraphListData();
              });
            });
          }

          $("#build_select").show().click(function(event) {
            if(self.currentOrgId.toString().indexOf(',') == -1){ //单
              loadSelectBuildFun(self.currentOrgId,function(data){
                self.currentBuildId = data.buildId;
                $("#build_select span").html(data.buildName);
                self.pageIndex = 0;
                if (self.currentBuildId == 0){
                    self.vrType = 0;
                } else {
                    self.vrType = 2;
                }
                $("#VR_list").empty();
                self.getLayeredGraphListData();
              });
            }else{ //多
              app.methods.showToastCenter("请选择联网单位");
            }
          });

          self.pageIndex = 0;
          self.currentBuildId = 0;
          $("#VR_list").empty();
          self.getLayeredGraphListData();
        },
      }
  }
</script>